<!--
 * @Author: your name
 * @Date: 2021-12-25 16:26:38
 * @LastEditTime: 2021-12-25 21:06:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui\src\pages\order\goods\List.vue
-->
<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:03:19
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="">
    菜品管理:
    <div>你好好好</div>
    <div class="caidan">
      <div class="xiangpian">
        <img :src="isrc" alt="">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'Demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F076c839571bbf704605a73b4782991a9eab6fcee137bb-x7ZwYw_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624691909&t=d66fa397e46962394ea49c5d00f4dc38'
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  },
  // 组件方法
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.caidan{
  position: relative;
  height: 100px;
  width: 500px;
  background-color: aqua;
  top: 90px;
  left: 40px;
}
.xiangpian{
    position:absolute ;
    left: 50%;
    /* margin-left: 50%; */
}
img{
  width: 50px;
  height: 50px;
}
</style>
